<template>
	<view class="after_sale_detail">
		<view class="tips">本次订单给您带来了不便实在抱歉，请按提示清楚的反馈问题，我们将会尽快帮您解决，感谢您的谅解与配合</view>
		<view class="after_sale_detail-item" v-for="(item,index) in saleItem" :key="index">
			<view class="after_sale_detail-tit">
				{{item.title}} <text v-if="item.required">(必传)</text>
				<view class="title-tips">{{item.tips}}</view>
			</view>
			<view class="after_sale_detail-imgs" :class="{block: index > 2}">
				<view class="img-box" v-for="(imgItem,dIndex) in item.imgList" :key="dIndex">
					<block v-if="index < 3">
						<image
							src="https://master.jiaju01.com/web/shopImgs/sale-close.png?v=1" 
							class="close" 
							@click="splitImg(index,dIndex,imgItem.order_after_img_id)">
						</image>
						<image class="img" :src="imgItem.image"></image>
					</block>
					<view class="video-box" v-else>
						<view class="video-box-item">
							<video :src="imgItem.image"></video>
							<button type="primary" size="mini" @click="delVideo(index,dIndex,imgItem.order_after_img_id)">移除视频</button>
						</view>
					</view>
				</view>
				<view class="after_sale_detail-tit-imgs-btn" @click="choseImg(index)">
					<image src="https://master.jiaju01.com/web/shopImgs/sale-btn.png?v=1" class="up-img" v-if="index < 3"></image>
					<image src="https://master.jiaju01.com/web/shopImgs/sale-btn-1.png" class="up-img" v-else></image>
				</view>
			</view>
		</view>
		<view class="after_sale_detail-textarea">
			<image src="https://master.jiaju01.com/web/shopImgs/sale_edit.png"></image>
			<textarea placeholder="请输入售后描述(必填)" v-model="form.content"></textarea>
		</view>
		<view class="after_sale_btn"><text @click="$u.throttle(submit,2000)">{{!order_after_id?'确定提交':'确定修改'}}</text></view>
	</view>
</template>

<script>
	import md5 from '@/static/utils/md5.min.js'
	export default {
		data() {
			return {
				order_after_id: '',
				saleInfo: '',
				data: {
					type: ''
				},
				form: {
					viceImages: '',
					infoImages: '',
					pageImages: '',
					rec_id: '',
					order_sn: '',
					store_id: '',
					goods_id: '',
					order_id: '',
					content: '',
					after_video: ''
				},
				saleItem: [{
					title: '上传整体图',
					imgList: [],
					tips: '整体图是为了辨别是哪件产品',
					required: true
				}, {
					title: '上传细节图',
					imgList: [],
					tips: '确认产品具体是有什么问题',
					required: true
				}, {
					title: '上传包装图',
					imgList: [],
					tips: '为了辨别产品售后责任人',
					required: true
				}, {
					title: '上传视频',
					imgList: [],
					tips: '如视频能更直观反馈也可以上传视频哦'
				}],
				activity: ''
			};
		},
		onLoad(options) {
			if(options.activity){
				this.activity = options.activity
			}
			if(!options.order_after_id){
				this.form.rec_id = options.recid
				this.form.order_sn = options.ordersn
				this.form.store_id = options.storeid
				this.form.goods_id = options.goodsid
				this.form.order_id = options.order_id
			}else{
				this.order_after_id = options.order_after_id
				this.getData()
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let req = {}
				req.timestamp = Math.round(new Date().getTime() / 1000)
				req.port = 'wechat'
				req.key = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).token:''
				let obj = 'jjds2020+'
				let newData = this.objKeySort(req)
				for (let i in newData) {
					obj += i + '=' + newData[i] + '&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5(obj)
				obj = obj.toUpperCase()
				req.sign = obj
				req.order_after_id = this.form.rec_id
				if(this.activity){
					req.activity = this.activity
				}
				this.data = req
			},
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			getData() {
				let data = {
					order_after_id: this.order_after_id
				}
				this.$u.apiWei.saleList(data).then(res => {
					this.saleInfo = res.datas[0]
					if (this.saleInfo.image_list && this.saleInfo.image_list.length) {
						this.saleInfo.image_list.forEach(item => {
							if (item.type == 1) {
								this.saleItem[0].imgList.push(item)
							} else if (item.type == 2) {
								this.saleItem[1].imgList.push(item)
							} else if(item.type == 3){
								this.saleItem[2].imgList.push(item)
							}else if(item.type == 4){
								this.saleItem[3].imgList.push(item)
							}
						})
					}
					this.form.content = res.datas[0].content
				})
			},
			choseImg(index) {
				if(index < 3){
					uni.chooseImage({
						count: 9,
						sourceType: ['album', 'camera'],
						sizeType: ['compressed'],
						success: (res) => {
							res.tempFilePaths.forEach(item => {
								if (this.order_after_id != '') {
									// 修改
									switch (Number(index)) {
										case 0:
											this.data.type = 1
											break;
										case 1:
											this.data.type = 2
											break;
										case 2:
											this.data.type = 3
											break;
									}
									this.data.order_after_id = this.order_after_id
									console.log(this.data)
									uni.uploadFile({
										url: `${this.$domain}/api/Orderlist/AddImg`,
										filePath: item,
										name: 'file',
										formData: this.data,
										success: (url) => {
											console.log(JSON.parse(url.data))
											if (JSON.parse(url.data).code == 200) {
												this.saleItem[index].imgList.push({
													order_after_img_id: JSON.parse(url.data).datas[0].image_id,
													image: JSON.parse(url.data).datas[0].imgUrl
												})
											} else {
												uni.showToast({
													icon: 'none',
													title: JSON.parse(url.data).error,
													duration: 1500
												})
											}
										}
									})
								} else {
									// 申请
									let id = 0
									this.data.type = 1
									uni.uploadFile({
										url: `${this.$domain}/api/Orderlist/AddImg`,
										filePath: item,
										name: 'file',
										formData: this.data,
										success: (url) => {
											console.log(JSON.parse(url.data))
											if (JSON.parse(url.data).code == 200) {
												this.saleItem[index].imgList.push({
													order_after_img_id: JSON.parse(url.data).datas[0].image_id,
													image: JSON.parse(url.data).datas[0].imgUrl
												})
											} else {
												uni.showToast({
													icon: 'none',
													title: JSON.parse(url.data).error,
													duration: 1500
												})
											}
										}
									})
								}
							})
						}
					})
				}else{
					uni.chooseVideo({
						sourceType: ['camera','album'],
						success: (res) => {
							let url
							if(this.order_after_id){
								this.data.order_after_id = this.order_after_id
								url = `${this.$domain}/api/Orderlist/AddImg`
							}else{
								url = `${this.$domain}/api/Upimg/UpVideo`
							}
							this.data.type = 4
							uni.showLoading({
								title: '正在上传'
							})
							uni.uploadFile({
								url: url,
								filePath: res.tempFilePath?res.tempFilePath:res.tempFile,
								name: 'file',
								formData: this.data,
								success: (url) => {
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									if (JSON.parse(url.data).code == 200) {
										if(this.order_after_id){
											this.saleItem[index].imgList.push({
												order_after_img_id: JSON.parse(url.data).datas[0].image_id,
												image: JSON.parse(url.data).datas[0].imgUrl
											})
										}else{
											this.saleItem[index].imgList.push({
												order_after_img_id: 0,
												image: JSON.parse(url.data).datas
											})
											console.log(this.saleItem[index].imgList)
										}
									} else {
										uni.showToast({
											icon: 'none',
											title: JSON.parse(url.data).error,
											duration: 1500
										})
									}
								}
							})
						}
					})
				}
			},
			delVideo(index,y,order_after_img_id){
				this.saleItem.forEach((item,i) => {
					if(index==i){
						item.imgList.forEach((data,x) => {
							if(y==x){
								item.imgList.splice(x,1)
							}
						})
					}
				})
				if(order_after_img_id){
					this.$u.apiWei.saleDelImg({order_after_img_id: order_after_img_id})
				}
			},
			splitImg(index,dIndex,order_after_img_id){
				this.saleItem[index].imgList.splice(dIndex,1)
				this.$u.apiWei.saleDelImg({order_after_img_id: order_after_img_id})
			},
			submit() {
				let viceImages = [],
					infoImages = [],
					pageImages = [],
					videos = []
				this.saleItem[0].imgList.forEach(item => {
					viceImages.push(item.image)
				})
				this.saleItem[1].imgList.forEach(item => {
					infoImages.push(item.image)
				})
				this.saleItem[2].imgList.forEach(item => {
					pageImages.push(item.image)
				})
				this.saleItem[3].imgList.forEach(item => {
					videos.push(item.image)
				})
				this.form.viceImages = viceImages.join(',')
				this.form.infoImages = infoImages.join(',')
				this.form.pageImages = pageImages.join(',')
				this.form.after_video = videos.join(',')
				if(this.activity){
					this.form.activity = this.activity
				}
				if (this.order_after_id == '') {
					this.$u.apiWei.saleAdd(this.form).then(res => {
						uni.showToast({
							icon: 'none',
							title: '售后申请成功，正在为您加急处理，请耐心等待',
							duration: 1500
						})
						setTimeout(() => {
							if(this.activity){
								uni.navigateBack({
									animationDuration: 500
								})
								return
							}
							uni.navigateTo({
								animationDuration: 500,
								url: '/my/my-order/after_sale/after_sale'
							})
						}, 1500)
					})
				} else {
					this.$u.apiWei.orderAfterUp({
						order_after_id: this.order_after_id,
						content: this.form.content
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功，请等待处理',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
		padding-bottom: 30rpx;
	}

	.after_sale_detail {
		.tips{
			padding: 30rpx 30rpx 0;
			color: #ef8200;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 50rpx;
		}
		.after_sale_detail-item {
			margin: 25rpx;
			padding: 30rpx;
			background-color: #FFF;
			border-radius: 10rpx;
		}

		.after_sale_detail-tit {
			padding-bottom: 30rpx;
			border-bottom: solid 1px #F7F7F7;
			font-size: 32rpx;
			color: #666;
			text{
				color: #ef8200;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
			.title-tips{
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #ef8200;
			}
		}

		.after_sale_detail-imgs {
			display: flex;
			flex-wrap: wrap;
			&.block{
				display: block;
				.img-box{
					width: auto;
					height: auto;
					float: none;
					margin: 0;
				}
			}
		}

		.after_sale_detail-tit-imgs-up {
			display: flex;
			flex-wrap: wrap;
		}

		.img-box {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin: 30rpx 20rpx 0 0;
			float: left;
		}

		.img-box:nth-child(3n) {
			margin-right: 0;
		}

		.img-box .close {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			right: 15rpx;
			top: 15rpx;
			z-index: 9;
		}

		.img-box .img {
			width: 200rpx;
			height: 200rpx;
			background-color: #EEE;
			border: solid 1px #EEE;
			box-sizing: border-box;
		}
		
		.video-box{
			video{
				width: 100%;
				height: 300rpx;
				margin-top: 30rpx;
			}
			button{
				background-color: #141414;
			}
		}

		.after_sale_detail-tit-imgs-btn {
			width: 200rpx;
			height: 200rpx;
			margin-top: 30rpx;
		}

		.after_sale_detail-tit-imgs-btn .up-img {
			width: 200rpx;
			height: 200rpx;
		}

		.after_sale_detail-textarea {
			border-radius: 10rpx;
			background-color: #FFF;
			margin: 25rpx;
			padding: 30rpx;
			display: flex;
		}

		.after_sale_detail-textarea image {
			width: 26rpx;
			height: 26rpx;
			margin: 5rpx 20rpx 0 0;
		}

		.after_sale_detail-textarea textarea {
			flex: 1;
			min-width: 0;
			font-size: 28rpx;
			height: 200rpx;
		}

		.after_sale_btn {
			margin: 25rpx 25rpx 0;
		}

		.after_sale_btn text {
			display: block;
			font-size: 32rpx;
			color: #FFF;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background: rgba(239, 130, 0, 1);
			border-radius: 10rpx;
		}
	}
</style>
